<template>
    <view class="m-water-fall">
        <m-list v-for="index in fallCount" :border="false" :width="width">
            <m-list-item
                direction="column"
                v-for="(data, itemIndex) in datasArray[index - 1].value"
                :border="false"
                :class="{ 'm-water-fall-list-item-first': itemIndex == 0 }"
                :card="true"
            >
                <template v-slot:header>
                    <slot name="header" :data="data"></slot>
                </template>
                <template v-slot:body>
                    <slot name="body" :data="data"></slot>
                </template>
                <template v-slot:footer>
                    <slot name="footer" :data="data"></slot>
                </template>
            </m-list-item>
        </m-list>
    </view>
</template>

<script lang="ts" setup>
import { ref, watch, type Ref } from 'vue'
import MList from './MList.vue'
import MListItem from './MListItem.vue'

const props = defineProps({
    fallCount: { type: Number, default: 2 },
    datas: { type: Array, default: [] }
})
const width = ref(98 / props.fallCount + '%')
const datasArray = ref<Ref[]>([])
for (let i = 0; i < props.fallCount; i++) {
    datasArray.value.push(ref([]))
}
watch(
    () => props.datas,
    (newValue) => {
        datasArray.value.forEach((v) => {
            v.value = []
        })
        for (let i = 0; i < newValue.length; i++) {
            datasArray.value[i % props.fallCount].value.push(newValue[i])
        }
    },
    { immediate: true }
)
</script>

<style lang="scss" scoped>
.m-water-fall-list-item-first {
    padding-top: 0rpx;
}
.m-water-fall {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
</style>
